<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>


	<script>
		// var div = document.querySelector('div');
		// div.addEventListener('click', function () {

		// })

		// div.click()


		// class Publish {

		// }
		// var p1 = Publish()
		// p1.subscribe("click", () => { })
		// p1.publish('click')


		class EventBus {
			constructor() {
				this.events = {}
			}
			on(eventName, cb) {
				if (!this.events[eventName]) {
					this.events[eventName] = []
				}
				this.events[eventName].push(cb)
			}
			emit(eventName, ...args) {
				if (this.events[eventName]) {
					this.events[eventName].forEach((cb) => {
						cb(...args)
					})
				}
			}
			remove(eventName, cb) {
				if (this.events[eventName]) {
					let index = this.events[eventName].indexOf(cb);
					if (index != -1) {
						this.events[eventName].splice(index, 1)
					}
				}
			}
			removeAll(eventName) {
				if (this.events[eventName]) {
					delete this.events[eventName]
				}
			}
		}

		var eventBus = new EventBus();
		eventBus.on("click", (data) => { console.log("click1", data) })
		eventBus.on("click", (data) => { console.log("click2", data) })
		let cb3 = (data) => {
			console.log("click3", data)
		}
		eventBus.on('click', cb3)
		eventBus.emit("click", { msg: "这是触发时候传递的数据" })

	</script>
</body>

</html>